import React, { PureComponent } from "react"
import classNames from "classnames"

export default class MyClassNames extends PureComponent {
  constructor() {
    super()
    this.state = {
      isA: true,
      isB: false
    }
  }

  render() {
    const { isA, isB } = this.state
    const classList = []
    if (isA) classList.push("a")
    if (isB) classList.push("b")
    const className = classList.join(" ")
    return (
      <div>
        <div className={`${isA ? "a" : ""} ${isB ? "b" : ""}`}>test1</div>
        <div className={className}>test2</div>
        <div className={classNames("normal", { a: isA, b: isB })}>test3</div>
      </div>
    )
  }
}
